<template>
    <div class="settleApply-wrapper">
        <IHeader class="header" back="true" title="申请入驻"></IHeader>
        <!--入驻步骤-->
        <div class="apply-content">
            <Step step="0"></Step>
            <!--企业列表-->
            <div class="enterprise-wrapper">
                <div class="search-wrapper flex_row">
                    <div class="city flex_row" @click="handleChooseCity">
                        <text class="city-name col_464646">{{chooseCity}}</text>
                        <image class="arrow_bottom" :src="imgPath('arrow_bottom.png')"></image>
                    </div>
                    <div class="input-wrapper">
                        <input class="search-enterprise" v-model="addressName" @input="askLocationList" type="text" placeholder="请输入企业名称">
                        <image class="search_icon" :src="imgPath('search_icon.png')"></image>
                    </div>
                </div>
                <list class="addrList" v-if="locationList.length > 0" @loadmore="loadMoreLocation">
                    <cell class="addrCell flex_row" :class="[(index < locationList.length - 1) ? 'border_bottom' : '']" v-for="(item, index) in locationList" :key="index">
                        <div class="infomation">
                            <text class="company col_464646">{{item.name}}</text>
                            <div class="location-wrapper flex_row">
                                <image class="location-icon" :src="imgPath('location.png')"></image>
                                <text class="location">{{item.address}}</text>
                            </div>
                        </div>
                        <text class="toApply" @touchstart="touStart" @touchend="touEnd" @click="applyCompany(item)">立即申请</text>
                    </cell>
                </list>
            </div>
            <!--创建企业-->
            <div class="create-company-wrapper flex_row">
                <text class="create-tip">没有找到自己的企业？点击创建</text>
                <Buttons class="create-btn" word="创建企业" @doclick="handleCreateCompany"></Buttons>
            </div>
        </div>
        <!--城市选择-->
        <wxc-city ref="wxcCity" :currentLocation="currentCity" :sourceData="sourceData"
                  @wxcCityItemSelected="citySelect"></wxc-city>
        <!--确认企业信息弹窗-->
        <Dialog :show="dialogShow" @close="cancel">
            <text class="title">请确认以下为您的企业信息</text>
            <div class="content">
                <div class="company-item">
                    <text class="tit">企业</text>
                    <text class="con">{{activeItem.name}}</text>
                </div>
                <div class="company-item">
                    <text class="tit">地址</text>
                    <text class="con">{{activeItem.address}}</text>
                </div>
            </div>
            <div class="footer-wrapper flex_row">
                <text class="footer-btn cancel" @click="cancel">取消</text>
                <text class="footer-btn confirm" @click="handleCreateCompany">确认</text>
            </div>
        </Dialog>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Step from '@/components/settleStep'
import Dialog from '@/components/dialog'
import Buttons from '@/components/buttons'
import sourceData from '@/util/citys'
import { WxcCity } from 'weex-ui'
// import { validatenull } from '@/util/validate'
const stream = weex.requireModule('stream')
// const modal = weex.requireModule('modal')
export default {
  name: 'settleApply',
  data () {
    return {
      applyType: '', // 企业入驻类型
      locationList: [], // 地点信息
      currentCity: '厦门', // 当前城市
      chooseCity: '厦门', // 选择城市
      sourceData, // 城市列表
      dialogShow: false, // 弹窗显示
      activeItem: {}, // 点击选中地点
      addressName: '', // 输入内容
      page_num: 0,
      mapAk: 'PhEq85uGC0Qf7RrhGMlMeeZ5eirCGNfw' // 百度地图ak
    }
  },
  created () {
    this.applyType = this.$route.query.item.value // 传参的入驻类型
  },
  mounted () {
    const that = this
    stream.fetch({
      method: 'GET',
      url: 'http://api.map.baidu.com/location/ip?ak=' + that.mapAk,
      type: 'json',
      timeout: 30000
    }, function (ret) {
      let city = ret.data.content.address_detail.city
      city = city.substring(0, city.length - 1)
      that.currentCity = city
      that.chooseCity = that.currentCity
    })
  },
  methods: {
    cancel () { // 取消
      this.dialogShow = false
    },
    confirm () { // 确认
      this.$router.push({
        path: '/settle/information',
        query: {type: this.applyType, addrObj: this.activeItem}
      })
    },
    handleCreateCompany () { // 创建企业
      this.$router.push({
        path: '/settle/information',
        query: {type: this.applyType, addrObj: this.activeItem}
      })
      // this.$router.push('/settle/information')
    },
    applyCompany (item) { // 立即申请
      this.activeItem = item
      this.dialogShow = true
    },
    handleChooseCity () { // 切换城市
      // this.cityStyleType = 'list'
      this.$refs['wxcCity'].show()
    },
    citySelect (e) { // 城市选择
      this.chooseCity = e.item.name
    },
    askLocationList () { // 输入内容改变获取内容
      const that = this
      that.page_num = 0
      that.locationList = []
      that.getAddressList()
    },
    getAddressList () { // 地图搜索内容
      const that = this
      let mapUrl = 'http://api.map.baidu.com/place/v2/search?query=' + that.addressName + '&region=' + that.chooseCity + '&page_num=' + that.page_num + '&city_limit=true&output=json&ak=' + that.mapAk
      stream.fetch({
        method: 'GET',
        url: mapUrl,
        type: 'json',
        timeout: 30000
      }, function (ret) {
        let datas = ret.data.results
        that.locationList = that.locationList.concat(datas)
      })
    },
    loadMoreLocation () { // 上滑加载更多
      const that = this
      that.page_num++
      that.getAddressList()
    },
    touStart (e) {
      e.target.style.backgroundColor = '#7d88a4'
    },
    touEnd (e) {
      e.target.style.backgroundColor = '#464d61'
    }
  },
  components: {
    IHeader,
    Step,
    Dialog,
    Buttons,
    WxcCity
  }
}
</script>

<style scoped>
    .col_464646 {
        color: #464646;
    }
    .flex_row {
        flex-direction: row;
    }
    .settleApply-wrapper {
        background-color: #f5f5f5;
    }
    .apply-content {
        padding-top: 88px;
    }
    .enterprise-wrapper {
        background-color: #fff;
        box-shadow: 0 -2px 0 rgba(43, 48, 64, 0.1);
    }
    .search-wrapper {
        padding-top: 24px;
        padding-right: 24px;
        padding-left: 24px;
        padding-bottom: 24px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(43, 48, 64, 0.3);
        /*box-shadow: 0 2px 0 rgba(43, 48, 64, 0.3);*/
    }
    .city {
        height: 50px;
        margin-right: 24px;
        align-items: center;
    }
    .city-name {
        margin-right: 16px;
        font-size: 32px;
    }
    .arrow_bottom {
        width: 28px;
        height: 28px;
    }
    .input-wrapper {
        flex: 1;
        /*height: 50px;*/
    }
    .search-enterprise {
        flex: 1;
        height: 50px;
        padding-left: 16px;
        padding-right: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: #cecece;
        line-height: 48px;
        color: #464646;
        placeholder-color: #cecece;
        border-radius: 25px;
    }
    .search_icon {
        position: absolute;
        right: 16px;
        top: 11px;
        width: 28px;
        height: 28px;
    }
    .addrList {
        /*overflow: scroll;*/
        height: 700px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(43, 48, 64, 0.3);
    }
    .addrCell {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
        justify-content: space-between;
        align-items: center;
    }
    .border_bottom {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .company {
        width: 480px;
        /*margin-bottom: 16px;*/
        margin-bottom: 8px;
        font-size: 28px;
        line-height: 40px;
    }
    .location-wrapper {
        width: 480px;
        /*align-items: center;*/
    }
    .location-icon {
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .location {
        width: 440px;
        font-size: 24px;
        line-height: 28px;
        color: #868686;
    }
    .toApply {
        height: 46px;
        padding-left: 12px;
        padding-right: 12px;
        line-height: 46px;
        color: #fff;
        font-size: 24px;
        background-color: #464d61;
        border-radius: 8px;
    }
    .create-company-wrapper {
        margin-top: 52px;
        padding-bottom: 36px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .create-tip {
        margin-bottom: 12px;
        padding-left: 16px;
        padding-right: 16px;
        text-align: center;
        font-size: 24px;
        color: #a4a4a4;
    }
    .title {
        margin-bottom: 52px;
        font-size: 28px;
        text-align: center;
        color: #262626;
        font-family: medium;
    }
    .content {
        padding-left: 54px;
        padding-right: 54px;
    }
    .company-item {
        margin-bottom: 20px;
        flex-direction: row;
    }
    .tit {
        margin-right: 24px;
        font-size: 26px;
        line-height: 36px;
        color: #464646;
    }
    .con {
        width: 320px;
        font-size: 24px;
        color: #666;
        line-height: 36px;
    }
    .footer-wrapper {
        margin-top: 40px;
        padding-left: 110px;
        padding-right: 110px;
        justify-content: space-between;
    }
    .footer-btn {
        width: 124px;
        height: 44px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        line-height: 44px;
        font-size: 26px;
        text-align: center;
        border-radius: 8px;
    }
    .cancel {
        color: #2b3040;
        background-color: #fff;
    }
    .confirm {
        color: #fff;
        background-color: #2b3040;
    }
    .dialog-inner {
        position: absolute;
        top: 230px;
        left: 116px;
        width: 518px;
        padding-top: 52px;
        padding-bottom: 72px;
        border-radius: 10px;
        background-color: #fff;
    }
    .map {
        width: 1px;
        height: 1px;
        visibility: hidden;
    }
</style>
